<template>
  <div class="login-container">
    <h2>登录</h2>
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" id="username" v-model="username" required />
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" id="password" v-model="password" required />
      </div>
      <button type="button" class="btn" @click="login">登录</button>
      <button type="button" class="btn" @click="goToOther">访问/other/test</button>
  </div>
</template>

<script setup>
import axios from 'axios';
import {ref} from "vue"

const username = ref("")
const password = ref("")

async function login(){
  console.log(username.value)
  console.log(password.value)

  const params = new URLSearchParams()
  params.append('username',username.value)
  params.append('password',password.value)

  const res = await axios({
    url: "/api/login/auth-login",
    method: "POST",
    headers: {
      "Content-Type" : 'application/x-www-form-urlencoded'
    },
    data: params
  })
  console.log(res.data)
  if(res.data.code == 1){
    localStorage.setItem("token",res.data.data)
  }
}

async function goToOther(){
  const token = localStorage.getItem("token")
  const res = await axios({
    url: "/api/other/test",
    method: "GET",
    headers: {
      Authorization: `Bearer ${token}`
    }
  })
  console.log(res)
}

</script>

<style scoped>
.login-container {
  width: 300px;
  margin: 100px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.btn {
  width: 100%;
  padding: 10px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.error {
  color: red;
  margin-top: 10px;
  text-align: center;
}
</style>
